<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        padding: 0;
        margin: 0;
    }

    canvas {
        display: block;
        background: black;
    }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var sWidth = window.innerWidth;
    var sHeight = window.innerHeight;
    canvas.width = sWidth;
    canvas.height = sHeight;

    var num = Math.random() * 60 + 20;
    var particleArr = [];

    function Particle() {
        this.x = Math.random() * sWidth;
        this.y = Math.random() * sHeight;
        this.r = Math.random() * 20 + 10;
        this.speedX = Math.random() * 20 - 10;
        this.speedY = Math.random() * 20 - 10;
        this.color = getColor();
    }
    Particle.prototype = {
        draw: function() {

            ctx.beginPath();
            var color = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.r);
            color.addColorStop(0, '#fff');
            color.addColorStop(0.4, '#fff');
            color.addColorStop(1, this.color);
            ctx.globalCompositeOperation = "lighter";
            ctx.fillStyle = color;
            ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
            ctx.fill();
        },
        move: function() {
            this.x += this.speedX;
            this.y += this.speedY;
            if (this.x < 0) {
                this.x = sWidth;
            }
            if (this.y < 0) {
                this.y = sHeight;
            }
            if (this.x > sWidth) {
                this.x = 0;
            }
            if (this.y > sHeight) {
                this.y = 0;
            }
            this.draw();
        }
    }
    createParticle();

    function createParticle() {
        for (var i = 0; i < num; i++) {
            var particle = new Particle();
            particleArr.push(particle);
        }
    }

    function particleMove() {
        ctx.globalCompositeOperation = "source-over";
        ctx.fillStyle = "rgba(0,0,0,0.35)";
        ctx.fillRect(0, 0, sWidth, sHeight);

        requestAnimationFrame(particleMove);
        for (var item of particleArr) {
            item.move();
        }
    }
    particleMove();

    function getColor() {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return `rgb(${r},${g},${b})`;
    }
    </script>
</body>

</html>